<template>
  <!-- 柱状图 -->
  <div id="MeterEchar">
    <div ref="chart01" class="chart01"></div>

  </div>
</template>

<script>
export default {
  name: "MeterEchar",
  components: {},
  props: {
    Tcolor: {
      type: String,
      default: "green",
    },
    MeterNum: {
      type: Number,
      default: 32,
    },
  },
  data() {
    return {
      value: 60,
    };
  },
  computed: {
    CurrentColor() {
      switch (this.Tcolor) {
        case "green":
          return "#71c084";
        case "red":
          return "#ec6e71";
        case "yellow":
          return "#e2d05a";
      }
    },
    MeterNumCom(){
      return this.MeterNum + Math.floor(Math.random() * 49+1)
    }
  },
  watch: {
    MeterNum(){
      this.drawMeterEchar();
    }
  },
  created() {},
  mounted() {
    this.drawMeterEchar();
  },

  methods: {
    drawMeterEchar() {
      let that = this;
      let mychart = that.$echarts.init(that.$refs.chart01);
      let option = {
        series: [
          {
            type: "gauge", // 测量仪
            center: ["50%", "50%"], // 图形坐标位置 左, 右
            radius: "80%", //控制图表大小
            startAngle: 215, //开始位置
            endAngle: -35, //结束位置
            min: 0, //最小值
            max: 100, //最大值
            splitNumber: 12, //
            itemStyle: {
              color: "#f5de5a",
            },
            progress: { //展示当前进度
              show: true, //是否展示进度条
              overlap: false, //是否重叠
              roundCap: true, // 是否圆顶
              clip: false, // 是否裁掉超出部分
              width: 16,
              itemStyle: {
                // 设置圆形
                color: this.MeterNumCom <= 30? '#71c084': this.MeterNumCom<= 60? '#ebd75c': '#ff7372', // 设置进度条初期式样
              }
            },
            pointer: { //显示仪表盘指针
              show: false, //是否显示仪表盘指针
            },
            axisLine: {
              roundCap: true,
              //设置线条
              lineStyle: {
                width: 16, //线条宽度
                color: [[1, 'rgba(255,255,255, .2)']] // 不透明度, 线条设置背景色
              },
            },
            // 内圈小刻度
            axisTick: {
              distance: 3,
              splitNumber: 3,
              length : 2,
              lineStyle: {
                width: 1,
                color: "#026fb9",
              },
            },
            // 大刻度
            splitLine: {
              show: false,
              distance: -52,
              length: 14,
              lineStyle: {
                width: 3,
                color: "#999",
              },
            },
            axisLabel: {
              show: false,
              distance: -20,
              color: "#999",
              fontSize: 20,
            },
            anchor: {
              show: false,
            },
            title: {
              show: false,
            },
            detail: {
              //文字内容样式
              valueAnimation: true,
              width: "60%",
              lineHeight: 40,
              borderRadius: 8,
              offsetCenter: [0, 0],
              fontSize: 24,
              // fontWeight: "bolder",
              formatter: "{value}",
              color: "auto",
            },
            data: [
              {
                value: this.MeterNumCom,
              },
            ],
          },
        ],
      };

      mychart.setOption(option);
      //   窗口自适应
      setTimeout(() => {
        let resizeFn = function () {
          mychart.resize();
        };
        window.addEventListener("resize", resizeFn);
        this.$once("hook:beforeDestroy", () => {
          mychart.dispose();
          mychart = null;
          window.removeEventListener("resize", resizeFn);
        });
      }, 200);
    },
  },
};
</script>
<style lang='less' scoped>
#MeterEchar {
  width: 100%;
  height: 100%;
  position: relative;
  // margin-top: 36px;
  .chart01 {
    width: 100%;
    height: 100%;
    overflow: hidden;
    clear: both;
  }
}
</style>